xiangcunwang_web/pages/primaryNavigation/[id].vue

<template>
    <div>
        <!-- 页面头部 -->
        <HomePageHead></HomePageHead>

        <!-- 页面导航 -->
        <HomePageNavigation></HomePageNavigation>

        <!-- 广告一 -->
        <HomeTopTen :imgurl="adList[0]" v-if="adList[0]"></HomeTopTen>

        <!-- 当前页面中的一级标题 -->
        <div class="nav1">
            <div class="inner">
                <h2 class="nav1_title">农技推广</h2>
            </div>
        </div>

        <!-- 二级导航列表 -->
        <div class="nav2top"></div>
        <div class="nav2">
            <ul class="inner">
                <li class="home">
                    <a href="#">网站首页</a>
                </li>
                <li class="titleList" v-for="(item, index) in 8" :key="index">
                    <NuxtLink to="#">
                        <span class="nav2_title">养殖技术</span>
                    </NuxtLink>
                </li>
            </ul>
        </div>
        <div class="nav2btm"></div>

        <!-- 第一层 -->
        <!-- 第一部分 -->
        <div class="part1">
            <div class="inner">
                <div class="part1_left">
                    <div class="part1_title">
                        <h2 class="nav_part1_left">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                    </div>
                    <div class="part1_content">
                        <div class="context_left">
                            <div class="top">
                                <a href="">
                                    <img src="../../public/index/01.png" alt="">
                                    <span class="title1">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </a>
                            </div>
                            <div class="bottom">
                                <div class="bottom_left" v-for="item in 2">
                                    <a href="">
                                        <img src="../../public/index/01.png" alt="">
                                        <span class="title2">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="context_right">
                            <ul class="rightContent">
                                <li class="topTitle1">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context1" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                            <ul class="rightContent">
                                <li class="topTitle1">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context1" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="part1_right">
                    <div class="part1_right_title">
                        <h2 class="part1_right_title1_active">
                            <a href="">乡村建设</a>
                            <em class="active_bg"></em>
                        </h2>
                    </div>
                    <div class="part1_right_content">
                        <div class="part1_right_content_top" v-for="item in 2">
                            <NuxtLink to="#">
                                <img src="../../public/index/01.png" alt="">
                                <span class="content_top_title2">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part1_right_content_bottom">
                            <li class="content_bottom_list" v-for="item in 6">
                                <NuxtLink to="#">
                                    西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="part2">
            <div class="inner">
                <div class="part2_left">
                    <div class="part2_title">
                        <h2 class="nav_part2_left">
                            <a href="#">
                                乡村招商
                            </a>
                            <em></em>
                        </h2>
                    </div>
                    <div class="part2_content">
                        <div class="part2_content_left">
                            <ul class="content_a">
                                <li class="topTitleaa">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context111" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                            <ul class="content_a">
                                <li class="topTitleaa">
                                    <a href="">定调超大特大城市将带来哪些新机遇？专家解读→</a>
                                </li>
                                <li class="context111" v-for="item in 4">
                                    <a href="#">
                                        多地迎新一轮土拍 部分区域出让高溢价地块
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="part2_content_right">
                            <div class="right_top">
                                <a href="">
                                    <img src="../../public/index/01.png" alt="">
                                    <span class="title11">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                </a>
                            </div>
                            <div class="right_bottom">
                                <div class="bottom_left" v-for="item in 2">
                                    <a href="">
                                        <img src="../../public/index/01.png" alt="">
                                        <span class="title22">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="part2_right">
                    <div class="part2_right_title">
                        <h2 class="part2_right_title1_active">
                            <a href="">乡村建设</a>
                            <em class="active_bg11"></em>
                        </h2>
                    </div>
                    <div class="part2_right_content">
                        <div class="part2_right_content_top" v-for="item in 2">
                            <NuxtLink to="#">
                                <img src="../../public/index/01.png" alt="">
                                <span class="content_top_title22">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            </NuxtLink>
                        </div>
                        <ul class="part2_right_content_bottom">
                            <li class="content_bottom_list" v-for="item in 6">
                                <NuxtLink to="#">
                                    西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                </NuxtLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 广告二 -->
        <HomeTopTen :imgurl="adList[1]" v-if="adList[1]"></HomeTopTen>

        <!-- 第二层 -->
        <div class="part3">
            <div class="inner">
                <div class="part3_left">
                    <div class="part3_left_top">
                        <div class="part3_leftTitle">
                            <h2 class="part3_left_title">
                                <NuxtLink to="#">三农人物</NuxtLink>
                                <em></em>
                            </h2>
                        </div>
                        <div class="part3_left_content">
                            <div class="part3_left_content_top">
                                <div class="content_top_left">
                                    <div class="part3_photo_text">
                                        <NuxtLink to="#">
                                            <img src="../../public/index/01.png" alt="">
                                            <span class="part3_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                        </NuxtLink>
                                        <span class="littleTips">精选</span>
                                    </div>
                                    <ul class="part3_content">
                                        <li class="part3_content_list" v-for="item in 5">
                                            <NuxtLink to="#">
                                                西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段
                                            </NuxtLink>
                                        </li>
                                    </ul>
                                </div>
                                <ul class="content_top_right">
                                    <li class="content_right_list" v-for="item in 5">
                                        <NuxtLink to="#">
                                            <div class="part3_time">
                                                <span class="month">19</span>
                                                <span class="xiegang">/</span>
                                                <span class="day">02</span>
                                            </div>
                                            <div class="time_left_content">
                                                全链汇聚，稻乐满仓！南沙丝苗米南沙丝苗南沙丝苗米南沙丝苗米
                                            </div>
                                        </NuxtLink>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="part3_left_bottom">
                        <div class="part3_leftTitle1">
                            <h2 class="part3_left_title">
                                <NuxtLink to="#">三农人物</NuxtLink>
                                <em></em>
                            </h2>
                            <h2 class="part3_left_title">
                                <NuxtLink to="#">三农名企</NuxtLink>
                                <em></em>
                            </h2>
                        </div>
                        <div class="part3_left_content1">
                            <div class="content_bottom_left">
                                <div class="content_top">
                                    <NuxtLink to="#">
                                        <img src="../../public/index/01.png" alt="">
                                        <span class="part3_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                    </NuxtLink>
                                </div>
                                <div class="content_bottom">
                                    <div class="content_bottom_1" v-for="item in 2">
                                        <NuxtLink to="#">
                                            <img src="../../public/index/01.png" alt="">
                                            <span class="part3_text">西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                                        </NuxtLink>
                                    </div>
                                </div>
                            </div>
                            <div class="content_bottom_right">
                                <ul class="bottom_content_1" v-for="item in 2">
                                    <li class="bottom_content_list" v-for="item in 5">
                                        <NuxtLink to="#">
                                            多地迎新一轮土拍 部分区域出让高溢价地块
                                        </NuxtLink>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="part3_right">
                    <div class="part3_rightTitle">
                        <h2 class="part3_right_title">
                            <NuxtLink to="#">三农人物</NuxtLink>
                            <em></em>
                        </h2>
                        <div class="rightMore">
                            <NuxtLink to="#">更多》</NuxtLink>
                        </div>
                    </div>
                    <ul class="part3_right_content_top">
                        <li class="part3_right_contentlist_top" v-for="(item, index) in 7">
                            <NuxtLink to="#">
                                <span class="numStyle">{{ index + 1 }}</span>
                                国家发展改革委:依法保护民营企业和民营企业相法保护民营企业和民营企业相
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part3_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part3_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part3_right_content_11">
                        <li class="part3_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part3_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part3_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part3_right_content_11">
                        <li class="part3_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                    <div class="part3_photo_text_right">
                        <NuxtLink to="#">
                            <span class="part3_text11">西部地区最大高铁枢纽重庆东站进入线路精调阶段西部地区最大高铁枢纽重庆东站进入线路精调阶段</span>
                            <img src="../../public/index/01.png" alt="">
                        </NuxtLink>
                    </div>
                    <ul class="part3_right_content_11">
                        <li class="part3_right_contentlist_11" v-for="(item, index) in 2">
                            <NuxtLink to="#">
                                绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动绵阳市关工委在乡村振兴学校科普宣传活动普宣传活动
                            </NuxtLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <!-- 页脚部分 -->
        <HomeFoot1></HomeFoot1>
    </div>
</template>

<script setup>
//获取生命周期
import { HomeTopTenTitle } from '#components';
import { onMounted } from 'vue';

//获得跳转过来的id
const route = useRoute();
const routeId = route.params.id; //获得该页面的id
const routeName = route.query.name; //获得该页面的名称
//获取行政部门和地区
const cityid = route.query.cityid;
const depId = route.query.department_id;

//获得axios
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;
// 定义响应式数据
const seoData = ref({
    title: '三农资讯网',
    description: '默认描述',
    keywords: '默认关键词',
    image: 'https://example.com/default-image.jpg'
});

const hoverStatus = ref(1)
const qhPic = function (num) {
    console.log(num)
    hoverStatus.value = num;
}

//获得所有广告
const adList = ref("");
const aa = 'CATEGORY'
const getadList = async () => {
    try {
        const response = await axios.get(`/web/getWebsiteAdvertisement?ad_tag=${aa}`);
        adList.value = response.data;
    } catch (error) {
        console.error(error);
    }
}
onMounted(() => {
    getadList()
})

// 在 onMounted 钩子中获取数据
onMounted(async () => {
    // try {
    //     const response = await axios.get(`/web/getWebsiteCategoryHead?catid=${routeId}`);
    //     const data = response.data.website_head; // 假设接口返回的数据在 data 字段中
    //     console.log(seoData.value.title)
    //     // 更新 seoData
    //     seoData.value = {
    //         title: data.seo_title,
    //         description: data.seo_description,
    //         keywords: data.seo_keywords,
    //         image: data.seo_image
    //     };
    //     console.log(seoData.value.title)

    // } catch (error) {
    //     console.error('获取 SEO 数据失败:', error);
    //     // 设置默认值
    //     seoData.value = {
    //         title: '三农资讯网',
    //         description: '默认描述',
    //         keywords: '默认关键词',
    //         image: 'https://example.com/default-image.jpg'
    //     };
    // }
});

// 监听 seoData 的变化，动态设置 SEO 字段
watch(seoData, (newVal) => {
    if (newVal.title) { // 确保 title 有值
        useSeoMeta({
            title: newVal.title, // 使用动态值
            description: newVal.description,
            ogTitle: newVal.title,
            ogDescription: newVal.description,
            ogImage: newVal.image,
            twitterTitle: newVal.title,
            twitterDescription: newVal.description,
            twitterImage: newVal.image,
            keywords: newVal.keywords
        });
    }
}, { immediate: true });



//该页面上所有的导航池 转为动态数据
const pageCategory = ref([]);
//该页面上需要渲染的所有数据
const pageData = ref([
    { id: 0, data: [], data2: [], title: "", cid: "" },
    { id: 1, data: [], title: "", cid: "" },
    { id: 2, data: [], title: "", cid: "" },
    { id: 3, data: [], title: "", cid: "" },
    { id: 4, data: [], title: "", cid: "" },
    { id: 5, data: [], title: "", cid: "" },
    { id: 6, data: [], title: "", cid: "" },
    { id: 7, data: [], title: "", cid: "" },
    { id: 8, data: [], title: "", cid: "" },
    { id: 9, data: [], title: "", cid: "" },
    { id: 10, data: [], title: "", cid: "" },
    { id: 10, data: [], title: "", cid: "" },
    {
        id: 11,
        title: "",
        data: [],
        data1: [],
        data2: [],
        data3: [],
        data4: [],
        category_id1: "",
        category_id2: "",
        category_id3: "",
        category_id4: "",
        title1: "",
        title2: "",
        title3: "",
        title4: "",
        cid: ""
    },
    { id: 12, data1: [], data2: [], data3: [], cid: "" },
])

//第一种情况 直接获得二级导航
//第一步：获得该分类下的所有二级导航
const newCategory = useState("getWebsiteModelCategory", () => ''); //动态数据
//placeid 固定为1
//pid 由上个页面带过来的1级导航id
//num 获得多少个2级导航 取决你的页面显示 上面有几个你就请求几个
const getWebsiteModelCategory = async () => {
    try {
        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${routeId}&num=${14}`);
        pageCategory.value = response.data;
        //给与板块标题
        for (let index in response.data) {
            pageData.value[index].title = response.data[index].name
            pageData.value[index].cid = response.data[index].category_id
        }
        console.log(pageData.value)
        console.log('pageCategory111111111111111', pageCategory.value)
        renderPage();
    } catch (error) {
        console.error(error);
    }
}

//第二种情况 用户搜索的二级导航
const searchCategory = useState("selectWebsiteCategory", () => ''); //动态数据
//placeid 固定为1
//pid 由上个页面带过来的1级导航id
//num 获得多少个2级导航 取决你的页面显示 上面有几个你就请求几个
const selectWebsiteCategory = async () => {
    try {
        const response = await axios.get(`/web/selectWebsiteCategory?pid=${routeId}&cityid=${cityid}&department_id=${depId}`);
        pageCategory.value = response.data;
        //给与板块标题
        for (let index in response.data) {
            pageData.value[index].title = response.data[index].name
        }
        console.log(pageData.value)
        console.log(pageCategory.value)
        renderPage2();
    } catch (error) {
        console.error(error);
    }
}


//第二步：获得对应分类下的数据
const renderPage = function () {
    console.log("当前获取到：" + pageCategory.value.length + "个导航")
    //循环pageCategory.value.length的次数执行getWebsiteArticlesList
    for (let i = 0; i <= pageCategory.value.length - 1; i++) {
        getWebsiteArticlesList(pageCategory.value[i].category_id, i)
    }
}

//第二步：获得搜索对应分类下的数据 - 因为字段名字不一样，这里做了一下区分
const renderPage2 = function () {
    console.log("当前获取到：" + pageCategory.value.length + "个导航")
    //循环pageCategory.value.length的次数执行getWebsiteArticlesList
    for (let i = 0; i <= pageCategory.value.length - 1; i++) {
        getWebsiteArticlesList(pageCategory.value[i].id, i)
    }
}



//第三步循环获取数据
const getWebsiteArticlesList = async (name, listType) => {

    //第一层
    //板块1 图文
    if (listType == 0) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${8}`);
        pageData.value[0].data = response.data
        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}&placeid=${9}`);
        pageData.value[0].data2 = response2.data
    }
    //板块2 图文
    if (listType == 1) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
        pageData.value[1].data = response.data;

    }

    //第二层
    //板块3 图文
    if (listType == 2) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
        pageData.value[2].data = response.data;
    }
    //板块4 图文
    if (listType == 3) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
        pageData.value[3].data = response.data;
    }
    //板块5 图文
    if (listType == 4) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${6}`);
        pageData.value[4].data = response.data;
    }

    //第三层
    //板块6 图文
    if (listType == 5) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}`);
        pageData.value[5].data = response.data;
    }
    //板块7 图文
    if (listType == 6) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
        pageData.value[6].data = response.data;
    }
    //板块8 图文
    if (listType == 7) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${5}`);
        pageData.value[7].data = response.data;
    }
    //板块9 图文
    if (listType == 8) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${4}`);
        pageData.value[8].data = response.data;
    }
    //第四层
    //板块10 文字
    if (listType == 9) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${10}`);
        pageData.value[9].data = response.data;
    }
    //板块11 文字
    if (listType == 10) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${10}`);
        pageData.value[10].data = response.data;
    }
    //板块12 轮播图 图文 文字
    if (listType == 11) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${2}&pagesize=${4}`);
        pageData.value[11].data = response.data;
        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${2}`);
        pageData.value[11].data2 = response2.data;
        const response3 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${5}`);
        pageData.value[11].data3 = response3.data;
    }

    //第五层
    //板块12 多级栏目 判断下面有没有子级 如果有每个取出来 6条图文
    if (listType == 12) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${10}`);
        pageData.value[12].data = response.data;
        console.log("第一步获取父级id")
        console.log(pageCategory.value[12].children_count)
        console.log(pageCategory.value[12].category_id)
        //判断一下里面有没有子导航
        if (pageCategory.value[12].children_count != 0) {
            //开始请求子导航
            const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${pageCategory.value[12].category_id}&num=${100}`);
            console.log("第二步获取子级数量")
            console.log(response.data.length)
            //获得标题
            //判断里面有几个
            for (let i = 1; i <= response.data.length; i++) {
                if (i == 1) {
                    pageData.value[12].title1 = response.data[0].name
                    pageData.value[12].category_id1 = response.data[0].category_id
                }
                if (i == 2) {
                    pageData.value[12].title2 = response.data[1].name
                    pageData.value[12].category_id2 = response.data[1].category_id
                }
                if (i == 3) {
                    pageData.value[12].title3 = response.data[2].name
                    pageData.value[12].category_id3 = response.data[2].category_id
                }
                if (i == 4) {
                    pageData.value[12].title4 = response.data[3].name
                    pageData.value[12].category_id4 = response.data[3].category_id
                }
            }
            //获得内容
            //第三步：有几个就循环几次
            for (let i = 1; i <= pageCategory.value[12].children_count; i++) {
                if (i == 1) {
                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id1}&level=${3}&pagesize=${6}`);
                    pageData.value[12].data1 = response.data
                }
                if (i == 2) {
                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id2}&level=${3}&pagesize=${6}`);
                    pageData.value[12].data2 = response.data
                }
                if (i == 3) {
                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id3}&level=${3}&pagesize=${6}`);
                    pageData.value[12].data3 = response.data
                }
                if (i == 4) {
                    const response = await axios.get(`/web/getWebsiteModelArticles?catid=${pageData.value[12].category_id4}&level=${3}&pagesize=${6}`);
                    pageData.value[12].data4 = response.data
                }
            }
        }

    }

    //板块13 轮播图 图文 文字
    if (listType == 13) {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${2}&pagesize=${4}`);
        pageData.value[13].data = response.data;
        const response2 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${3}&pagesize=${2}`);
        pageData.value[13].data2 = response2.data;
        const response3 = await axios.get(`/web/getWebsiteModelArticles?catid=${name}&level=${1}&pagesize=${5}`);
        pageData.value[13].data3 = response3.data;
    }
}

let scienceTitleList = [
    {
        id: 1,
        title: "农产畅销"
    },
    {
        id: 2,
        title: "农业在线"
    },
    {
        id: 3,
        title: "农产行情"
    },
    {
        id: 4,
        title: "名优特产"
    }
]

//鼠标移入标题时,下方内容会发生变化
let changeUl = (index) => {
    // console.log(index);
    if (process.browser) {
        let scienceListBox = document.querySelector('.scienceListBox');
        let titleList = document.querySelectorAll('.title>span>a')
        for (let i = 0; i < titleList.length; i++) {
            titleList[i].className = ''
        }
        titleList[index].setAttribute('class', 'current')
        if (index == 0) {
            scienceListBox.style.left = 0
        } else if (index == 1) {
            scienceListBox.style.left = "-790px"
        } else if (index == 2) {
            scienceListBox.style.left = "-1580px"
        } else if (index == 3) {
            scienceListBox.style.left = "-2370px"
        }
    }
}

//显示哪个tabs
let showTabs = ref(1)
let qhtabs = function (number) {
    console.log(number)
    showTabs.value = number
}

//挂载成功钩子函数
onMounted(() => {
    //判断一下应该走搜索还是直接走二级分类
    console.log(111111)
    console.log(cityid)
    console.log(cityid != undefined)
    console.log(depId != undefined)
    if (cityid != undefined || depId != undefined) {
        console.log(7777777777)
        console.log(cityid)
        console.log(depId)
        //获得用户搜索的导航
        selectWebsiteCategory()

    } else {
        console.log(888888888)
        //直接获得所有二级导航
        getWebsiteModelCategory()
    }
})

function getDays(time) {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${month}-${day}`;
}
</script>

<style lang="less" scoped>
// 一级标题
.nav1 {
    width: 100%;
    height: 214px;
    background: #fff;

    .inner {
        width: 1200px;
        height: 214px;
        margin: 0 auto;

        .nav1_title {
            width: 1120px;
            height: 214px;
            margin-left: 40px;
            line-height: 217px;
            text-align: center;
            font-family: DingTalk JinBuTi, DingTalk JinBuTi;
            font-weight: 400;
            font-size: 50px;
            color: #6D2512;
            background: url(/_nuxt/public/index/title_bg.png) no-repeat 0;
        }

    }
}

.nav2top {
    width: 1250px;
    height: 3px;
    margin: 0 auto;
    background-color: #a01c0e;
}

.nav2btm {
    width: 1200px;
    height: 3px;
    margin: 0 auto;
    background-color: #a01c0e;
}

.nav2 {
    width: 100%;
    height: 48px;
    background-color: #a01c0e;

    .inner {
        width: 1250px;
        height: 48px;
        line-height: 48px;
        padding: 0 45px;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;

        .titleList {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 14px;
            color: #FFFFFF;

            .nav2_title {
                display: inline-block;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
            }

            a {
                padding: 0 38px;
                color: #FFFFFF;
                border-left: 1px solid #7E1C11;
            }

            //鼠标点击后的样式
            .nav2_title_active {
                display: inline-block;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 14px;
                color: #FFFFFF;
                border-bottom: 1px solid #FFFFFF;
            }
        }

        .titleList:hover {
            a {
                color: #a01c0e;

                .nav2_title {
                    border-bottom: 1px solid #FFFFFF;
                }
            }
        }

        .home {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 14px;
            color: #F8ECD2;

            a {
                color: #F8ECD2;
                margin-right: 39px;
            }
        }
    }
}

//第一部分
.part1 {
    width: 100%;
    height: 585px;
    margin-top: 35px;

    .inner {
        width: 1200px;
        margin: 0 auto;

        .part1_left {
            float: left;
            width: 720px;

            .part1_title {
                width: 720px;
                height: 50px;
                line-height: 50px;

                .nav_part1_left {
                    float: left;
                    width: 100px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #333333;
                    position: relative;

                    a {
                        color: #333333;
                    }

                    em {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #a01c0e;
                        border-radius: 4px;
                        position: absolute;
                        top: 9px;
                        right: 6px;
                    }
                }

            }

            .part1_content {
                width: 720px;
                margin-top: 20px;

                .context_left {
                    float: left;
                    width: 350px;

                    .top {
                        width: 350px;

                        img {
                            width: 350px;
                            height: 230px;
                        }

                        a .title1 {
                            margin-top: 15px;
                            width: 350px;
                            height: 48px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            word-break: break-all;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 18px;
                            color: #333333;
                        }

                    }

                    .top:hover {
                        a .title1 {
                            color: #a01c0e;
                        }
                    }

                    .bottom {
                        width: 350px;
                        margin-top: 25px;

                        .bottom_left {
                            float: left;
                            width: 165px;

                            img {
                                width: 165px;
                                height: 96px;
                            }

                            a .title2 {
                                margin-top: 10px;
                                width: 165px;
                                height: 48px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 18px;
                                color: #333333;
                            }
                        }

                        .bottom_left:first-child {
                            margin-right: 20px;
                        }

                    }

                    .bottom_left:hover {
                        a .title2 {
                            color: #a01c0e;
                        }

                    }
                }

                .context_right {
                    float: right;
                    width: 350px;

                    .rightContent {
                        width: 350px;
                        height: 230px;

                        .topTitle1 {
                            width: 345px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 18px;
                            color: #333333;

                            a {
                                color: #333333;
                            }
                        }

                        .topTitle1:hover a {
                            color: #a01c0e;
                        }

                        .context1 {
                            margin-top: 27px;
                            width: 345px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #333333;

                            a {
                                color: #333333;
                            }
                        }

                        .context1:hover a {
                            color: #a01c0e;
                        }

                    }

                    .rightContent:first-child {
                        margin-bottom: 25px;
                    }
                }
            }
        }

        .part1_right {
            float: right;
            width: 450px;
            // height: 1000px;

            .part1_right_title {
                width: 450px;
                height: 50px;
                line-height: 50px;

                .part1_right_title1_active {
                    float: left;
                    margin-right: 40px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #333333;
                    position: relative;

                    a {
                        color: #333333;
                    }

                    .active_bg {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #a01c0e;
                        border-radius: 4px;
                        position: absolute;
                        top: 7px;
                        right: -5px;
                    }
                }

                .part1_right_title1 {
                    float: left;
                    margin-right: 40px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #999999;
                    position: relative;

                    a {
                        color: #999999;
                    }


                }

            }

            .part1_right_content {
                width: 450px;
                // height: 940px;
                margin-top: 20px;

                .part1_right_content_top {
                    float: left;
                    width: 220px;
                    height: 180px;

                    a img {
                        width: 220px;
                        height: 130px;
                    }

                    a .content_top_title2 {
                        display: inline-block;
                        width: 220px;
                        padding: 0 10px;
                        box-sizing: border-box;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #333333;
                        margin-top: 10px;
                    }
                }

                .part1_right_content_top:hover {
                    a .content_top_title2 {
                        color: #a01c0e;
                    }
                }

                .part1_right_content_top:nth-child(2) {
                    margin-left: 10px;
                }

                .part1_right_content_bottom {
                    width: 450px;
                    height: 300px;
                    margin-top: 20px;
                    overflow: hidden;

                    .content_bottom_list {
                        width: 450px;
                        height: 22px;
                        line-height: 21px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-top: 28px;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #333333;


                        a {
                            color: #333333;
                        }
                    }

                    .content_bottom_list:hover {
                        a {
                            color: #a01c0e;
                        }
                    }
                }
            }
        }
    }
}

//第二部分
.part2 {
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;

    .inner {
        width: 1200px;
        margin: 0 auto;

        .part2_left {
            float: left;
            width: 720px;

            .part2_title {
                width: 720px;
                height: 50px;
                line-height: 50px;

                .nav_part2_left {
                    float: left;
                    width: 100px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #333333;
                    position: relative;

                    a {
                        color: #333333;
                    }

                    em {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #a01c0e;
                        border-radius: 4px;
                        position: absolute;
                        top: 9px;
                        right: 6px;
                    }
                }
            }

            .part2_content {
                width: 720px;
                margin-top: 20px;

                .part2_content_left {
                    float: left;
                    width: 350px;

                    .content_a {
                        width: 350px;
                        height: 230px;

                        // margin-bottom: 25px;
                        .topTitleaa {
                            width: 345px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 18px;
                            color: #333333;

                            a {
                                color: #333333;
                            }
                        }

                        .topTitleaa:hover a {
                            color: #a01c0e;
                        }

                        .context111 {
                            margin-top: 27px;
                            width: 345px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #333333;

                            a {
                                color: #333333;
                            }
                        }

                        .context111:hover a {
                            color: #a01c0e;
                        }

                    }

                    .content_a:first-child {
                        margin-bottom: 25px;
                    }
                }

                .part2_content_right {
                    float: right;
                    width: 350px;
                    height: 440px;

                    .right_top {
                        width: 350px;
                        height: 300px;

                        a img {
                            width: 350px;
                            height: 230px;
                        }

                        a .title11 {
                            margin-top: 15px;
                            width: 350px;
                            height: 48px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            word-break: break-all;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 18px;
                            color: #333333;
                        }
                    }

                    .right_top:hover {
                        color: #a01c0e;

                        a .title11 {
                            color: #a01c0e;
                        }
                    }

                    .right_bottom {
                        width: 350px;
                        height: 165px;
                        margin-top: 20px;

                        .bottom_left {
                            float: left;
                            width: 165px;
                            height: 130px;

                            a img {
                                width: 165px;
                                height: 96px;
                            }

                            a .title22 {
                                margin-top: 10px;
                                width: 165px;
                                height: 48px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 18px;
                                color: #333333;
                            }

                        }

                        .bottom_left:hover {
                            color: #a01c0e;

                            a .title22 {
                                color: #a01c0e;
                            }
                        }

                        .bottom_left:first-child {
                            margin-right: 20px;
                        }
                    }


                }
            }
        }

        .part2_right {
            float: right;
            width: 450px;
            // height: 1000px;

            .part2_right_title {
                width: 450px;
                height: 50px;
                line-height: 50px;

                .part2_right_title1_active {
                    float: left;
                    margin-right: 40px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #333333;
                    position: relative;

                    a {
                        color: #333333;
                    }

                    .active_bg11 {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #a01c0e;
                        border-radius: 4px;
                        position: absolute;
                        top: 7px;
                        right: -5px;
                    }
                }

                .part2_right_title1 {
                    float: left;
                    margin-right: 40px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #999999;
                    position: relative;

                    a {
                        color: #999999;
                    }
                }

            }

            .part2_right_content {
                width: 450px;
                margin-top: 20px;

                .part2_right_content_top {
                    float: left;
                    width: 220px;
                    height: 180px;

                    a img {
                        width: 220px;
                        height: 130px;
                    }

                    a .content_top_title22 {
                        display: inline-block;
                        width: 220px;
                        padding: 0 10px;
                        box-sizing: border-box;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #333333;
                        margin-top: 10px;
                    }
                }

                .part2_right_content_top:hover {
                    a .content_top_title22 {
                        color: #a01c0e;
                    }
                }

                .part2_right_content_top:nth-child(2) {
                    margin-left: 10px;
                }

                .part2_right_content_bottom {
                    width: 450px;
                    height: 300px;
                    margin-top: 20px;
                    overflow: hidden;

                    .content_bottom_list {
                        width: 450px;
                        height: 22px;
                        line-height: 21px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin-top: 28px;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #333333;


                        a {
                            color: #333333;
                        }
                    }

                    .content_bottom_list:hover {
                        a {
                            color: #a01c0e;
                        }
                    }
                }
            }
        }
    }
}

//第三部分
.part3 {
    width: 100%;
    height: 1200px;
    margin-top: 35px;
    margin-bottom: 40px;

    .inner {
        width: 1200px;
        height: 1200px;
        background-color: #fff;

        .part3_left {
            float: left;

            .part3_left_top {
                width: 720px;
                overflow: hidden;

                .part3_leftTitle {
                    width: 720px;
                    height: 50px;
                    line-height: 50px;

                    .part3_left_title:first-child {
                        float: left;
                        margin-right: 20px;
                        width: 100px;
                        height: 50px;
                        line-height: 50px;
                        position: relative;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 20px;
                        color: #333333;

                        a {
                            color: #333333;
                        }

                        em {
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            background-color: #a01c0e;
                            border-radius: 4px;
                            position: absolute;
                            top: 9px;
                            right: 6px;
                        }
                    }

                    .part3_left_title {
                        float: left;
                        margin-right: 20px;
                        width: 100px;
                        height: 50px;
                        line-height: 50px;
                        position: relative;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 20px;
                        color: #999999;

                        a {
                            color: #999999;
                        }

                        // em{
                        //     display: inline-block;
                        //     width: 8px;
                        //     height: 8px;
                        //     background-color: #a01c0e;
                        //     border-radius: 4px;
                        //     position: absolute;
                        //     top: 9px;
                        //     right: 6px;
                        // }
                    }
                }

                .part3_left_content {
                    width: 720px;
                    margin-top: 20px;

                    .part3_left_content_top {
                        .content_top_left {
                            float: left;
                            width: 350px;

                            .part3_photo_text {
                                width: 350px;
                                position: relative;

                                img {
                                    width: 350px;
                                    height: 230px;
                                }

                                .littleTips {
                                    display: inline-block;
                                    width: 50px;
                                    height: 26px;
                                    line-height: 26px;
                                    text-align: center;
                                    background-color: #a01c0e;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #fff;
                                    position: absolute;
                                    top: 0;
                                    right: 10px;
                                }

                                .part3_text {
                                    display: inline-block;
                                    width: 350px;
                                    height: 26px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: bold;
                                    font-size: 18px;
                                    color: #333333;
                                    margin-top: 15px;
                                }
                            }

                            .part3_photo_text:hover {
                                .part3_text {
                                    color: #a01c0e;
                                }
                            }

                            .part3_content {
                                width: 350px;

                                .part3_content_list:first-child {
                                    width: 350px;
                                    height: 25px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: bold;
                                    font-size: 18px;
                                    color: #333333;
                                    line-height: 22px;
                                    margin-top: 35px;

                                    a {
                                        color: #333333;
                                    }
                                }

                                .part3_content_list:first-child:hover {
                                    a {
                                        color: #a01c0e;
                                    }
                                }

                                .part3_content_list:last-child {
                                    margin-bottom: 0;
                                }

                                .part3_content_list {
                                    width: 350px;
                                    height: 25px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 18px;
                                    color: #333333;
                                    line-height: 22px;
                                    margin-bottom: 27px;

                                    a {
                                        color: #333333;
                                    }
                                }

                                .part3_content_list:hover {
                                    a {
                                        color: #a01c0e;
                                    }
                                }
                            }
                        }

                        .content_top_right {
                            float: left;
                            width: 350px;
                            height: 542px;
                            border: 1px solid #D9D9D9;
                            margin-left: 20px;
                            padding: 30px 25px;
                            box-sizing: border-box;

                            .content_right_list {
                                width: 350px;
                                height: 58px;
                                line-height: 58px;
                                margin-bottom: 48px;

                                .part3_time {
                                    float: left;
                                    width: 77px;
                                    height: 58px;
                                    color: #a01c0e;

                                    .month {
                                        font-family: Microsoft YaHei, Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 26px;
                                        color: #A01C0E;
                                        line-height: 30px;
                                    }

                                    .xiegang {
                                        font-size: 22px;
                                        font-weight: 400;
                                    }

                                    .day {
                                        font-family: Microsoft YaHei, Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 16px;
                                        color: #A01C0E;
                                        line-height: 19px;
                                    }
                                }

                                .time_left_content {
                                    float: left;
                                    width: 231px;
                                    height: 58px;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    word-break: break-all;
                                    line-height: 22px;
                                    padding-top: 12px;
                                    box-sizing: border-box;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 18px;
                                    color: #333333;
                                    border-left: 1px solid #D9D9D9;
                                    padding-left: 22px;
                                }
                            }

                            .content_right_list:hover {
                                .time_left_content {
                                    color: #a01c0e;
                                }
                            }
                        }
                    }
                }
            }

            .part3_left_bottom {
                width: 720px;
                margin-top: 25px;

                .part3_leftTitle1 {
                    width: 720px;
                    height: 50px;
                    line-height: 50px;
                    margin-bottom: 25px;

                    .part3_left_title:first-child {
                        float: left;
                        margin-right: 20px;
                        width: 100px;
                        height: 50px;
                        line-height: 50px;
                        position: relative;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 20px;
                        color: #333333;

                        a {
                            color: #333333;
                        }

                        em {
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            background-color: #a01c0e;
                            border-radius: 4px;
                            position: absolute;
                            top: 9px;
                            right: 6px;
                        }
                    }

                    .part3_left_title {
                        float: left;
                        margin-right: 20px;
                        width: 100px;
                        height: 50px;
                        line-height: 50px;
                        position: relative;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 20px;
                        color: #999999;

                        a {
                            color: #999999;
                        }

                        // em{
                        //     display: inline-block;
                        //     width: 8px;
                        //     height: 8px;
                        //     background-color: #a01c0e;
                        //     border-radius: 4px;
                        //     position: absolute;
                        //     top: 9px;
                        //     right: 6px;
                        // }
                    }
                }

                .part3_left_content1 {
                    width: 720px;

                    .content_bottom_left {
                        float: left;
                        width: 350px;

                        // height: 350px;
                        .content_top {
                            width: 350px;

                            img {
                                width: 350px;
                                height: 230px;
                            }

                            .part3_text {
                                display: inline-block;
                                width: 350px;
                                height: 50px;
                                line-height: 22px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                margin-top: 15px;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: bold;
                                font-size: 18px;
                                color: #333333
                            }

                        }
                        .content_top:hover {
                           .part3_text {
                                color: #a01c0e;
                            } 
                        }

                        .content_bottom {
                            width: 350px;
                            margin-top: 20px;

                            .content_bottom_1 {
                                float: left;
                                width: 165px;

                                img {
                                    width: 165px;
                                    height: 96px;
                                }

                                .part3_text {
                                    display: inline-block;
                                    width: 165px;
                                    height: 44px;
                                    line-height: 22px;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 2;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    word-break: break-all;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 18px;
                                    color: #333333;
                                    margin-top: 10px;
                                }
                            }
                            .content_bottom_1:hover {
                               .part3_text {
                                    color: #a01c0e;
                                }
                            }

                            .content_bottom_1:first-child {
                                margin-right: 20px;
                            }

                        }
                    }

                    .content_bottom_right {
                        float: left;
                        margin-left: 20px;
                        width: 350px;

                        .bottom_content_1 {
                            width: 350px;

                            .bottom_content_list:first-child {
                                font-weight: bold;
                            }

                            .bottom_content_list {
                                width: 350px;
                                height: 25px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 18px;
                                color: #333333;
                                line-height: 21px;
                                margin-bottom: 25px;

                                a {
                                    color: #333333;
                                }
                            }

                           .bottom_content_list:hover {
                                a {
                                    color: #a01c0e;
                                }  
                           }
                        }

                        .bottom_content_1:first-child {
                            margin-bottom: 20px;
                        }

                        .bottom_content_1:last-child {
                            .bottom_content_list:last-child {
                                margin-bottom: 0;
                            }
                        }
                    }
                }
            }

        }

        .part3_right {
            float: right;
            width: 451px;

            .part3_rightTitle {
                width: 451px;
                height: 50px;
                line-height: 50px;

                .part3_right_title:first-child {
                    float: left;
                    margin-right: 20px;
                    width: 100px;
                    height: 50px;
                    line-height: 50px;
                    position: relative;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #333333;

                    a {
                        color: #333333;
                    }

                    em {
                        display: inline-block;
                        width: 8px;
                        height: 8px;
                        background-color: #a01c0e;
                        border-radius: 4px;
                        position: absolute;
                        top: 9px;
                        right: 6px;
                    }
                }

                .part3_right_title {
                    float: left;
                    margin-right: 20px;
                    width: 100px;
                    height: 50px;
                    line-height: 50px;
                    position: relative;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 20px;
                    color: #999999;

                    a {
                        color: #999999;
                    }

                    // em{
                    //     display: inline-block;
                    //     width: 8px;
                    //     height: 8px;
                    //     background-color: #a01c0e;
                    //     border-radius: 4px;
                    //     position: absolute;
                    //     top: 9px;
                    //     right: 6px;
                    // }
                }

                .rightMore {
                    float: right;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 12px;
                    color: #999999;

                    a {
                        color: #999999;
                    }

                }
            }

            .part3_right_content_top {
                width: 451px;
                margin-top: 20px;

                .part3_right_contentlist_top {
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #333333;
                    width: 425px;
                    height: 25px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-bottom: 25px;

                    a {
                        color: #333333;
                    }

                    .numStyle {
                        display: inline-block;
                        width: 22px;
                        height: 22px;
                        background-color: #f6f6f6;
                        text-align: center;
                        margin-right: 20px;
                        font-family: Protest Strike, Protest Strike;
                        font-weight: 400;
                        font-size: 16px;
                        color: #CCCCCC;
                        border-radius: 4px;
                    }
                }
                .part3_right_contentlist_top:hover{
                    color: #a01c0e;
                    a {
                        color: #a01c0e;
                    }
                }

                .part3_right_contentlist_top:nth-child(1) {
                    .numStyle {
                        background-color: #a01c0e;
                        color: #fff;
                    }
                }

                .part3_right_contentlist_top:nth-child(2) {
                    .numStyle {
                        background-color: #FFC62E;
                        color: #fff;
                    }
                }

                .part3_right_contentlist_top:nth-child(3) {
                    .numStyle {
                        background-color: #e98008;
                        color: #fff;
                    }
                }

                .part3_right_contentlist_top:last-child {
                    margin-bottom: 10px;
                }
            }

            .part3_photo_text_right {
                width: 451px;
                height: 120px;
                margin-top: 35px;
                margin-bottom: 35px;
                background-color: #f6f3f0;


                .part3_text11 {
                    float: left;
                    width: 271px;
                    height: 96px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #333333;
                    padding: 25px 20px;
                    box-sizing: border-box;
                }

                img {
                    float: left;
                    width: 180px;
                    height: 120px;
                }
            }
            .part3_photo_text_right:hover {
                color: #a01c0e;
                .part3_text11{
                    color: #a01c0e;
                }
            }

            .part3_right_content_11 {
                width: 451px;


                .part3_right_contentlist_11 {
                    width: 451px;
                    height: 25px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #333333;
                    line-height: 21px;

                    .erjibiaoti {
                        display: inline-block;
                        width: 87px;
                        height: 24px;
                        font-family: Microsoft YaHei, Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #A01C0E;
                        border-right: #D3D5D8 1px solid;
                        margin-right: 10px;
                    }

                    a {
                        color: #333333;
                    }
                }

                .part3_right_contentlist_11:hover {
                    color: #a01c0e;

                    a {
                        color: #a01c0e;
                    }
                }

                .part3_right_contentlist_11:first-child {
                    margin-bottom: 25px;
                }
            }


        }
    }
}
</style>